<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人主页</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#86a393', // 主色调 - 柔和的绿色
                        secondary: '#a0bbad', // 辅助色 - 更浅的绿色
                        accent: '#b8c6c0', // 强调色 - 浅绿灰色
                        dark: '#4a5c54', // 深色文本
                        light: '#f9faf9' // 浅色背景
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .card-hover {
                @apply hover:shadow-xl hover:-translate-y-1 transition-all duration-300;
            }
        }
    </style>
</head>
<body class="bg-light text-dark font-sans">
    <!-- 导航栏 -->
    <nav id="navbar" class="fixed w-full bg-white/95 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="#hero" class="text-2xl font-bold text-primary flex items-center space-x-2">
                <i class="fa fa-user-circle"></i>
                <span>我的主页</span>
            </a>
            <div class="hidden md:flex space-x-8">
                <a href="#about" class="font-medium hover:text-primary transition-colors">关于我</a>
                <a href="#projects" class="font-medium hover:text-primary transition-colors">项目经历</a>
                <a href="#skills" class="font-medium hover:text-primary transition-colors">技能</a>
                <a href="#contact" class="font-medium hover:text-primary transition-colors">联系我</a>
            </div>
            <button id="menu-toggle" class="md:hidden text-dark/70 focus:outline-none">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#about" class="py-2 font-medium hover:text-primary transition-colors">关于我</a>
                <a href="#projects" class="py-2 font-medium hover:text-primary transition-colors">项目经历</a>
                <a href="#skills" class="py-2 font-medium hover:text-primary transition-colors">技能</a>
                <a href="#contact" class="py-2 font-medium hover:text-primary transition-colors">联系我</a>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section id="hero" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/5 to-accent/5">
        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center gap-8">
            <div class="w-full md:w-1/2 text-center md:text-left">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-4 leading-tight text-shadow">
                    你好，我是<span class="text-primary">买润一</span>
                </h1>
                <p class="text-lg md:text-xl text-dark/70 mb-8 max-w-lg mx-auto md:mx-0">
                    专注于创建高效、美观的Web应用，热爱技术创新和用户体验设计。
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                    <a href="#projects" class="px-6 py-3 bg-primary text-white font-medium rounded-lg shadow-md hover:bg-primary/90 transition-all-300 flex items-center justify-center gap-2">
                        <i class="fa fa-code"></i>
                        查看我的作品
                    </a>
                    <a href="#contact" class="px-6 py-3 border border-primary text-primary font-medium rounded-lg hover:bg-primary/5 transition-all-300 flex items-center justify-center gap-2">
                        <i class="fa fa-envelope"></i>
                        联系我
                    </a>
                </div>
            </div>
            <div class="w-full md:w-1/2 flex justify-center">
                <div class="relative">
                    <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl">
                        <img src="images/头像.jpg" alt="个人照片" class="w-full h-full object-cover">
                    </div>
                    <div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-lg shadow-lg">
                        <div class="flex items-center gap-2 text-accent">
                            <i class="fa fa-certificate text-lg"></i>
                            <span class="font-medium">Web开发者</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我 -->
    <section id="about" class="py-16 md:py-24 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">关于我</h2>
                <div class="w-20 h-1 bg-primary mx-auto"></div>
            </div>
            
            <div class="bg-light rounded-xl shadow-md p-6 md:p-8 max-w-4xl mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="md:col-span-1">
                        <div class="flex flex-col space-y-4">
                            <div class="flex items-start gap-3">
                                <div class="bg-primary/10 p-2 rounded-lg text-primary">
                                    <i class="fa fa-user text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-dark/80">姓名</h4>
                                    <p class="text-dark/70">买润一</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start gap-3">
                                <div class="bg-secondary/10 p-2 rounded-lg text-secondary">
                                    <i class="fa fa-graduation-cap text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-dark/80">专业</h4>
                                    <p class="text-dark/70">信息管理与信息系统</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start gap-3">
                                <div class="bg-accent/10 p-2 rounded-lg text-accent">
                                    <i class="fa fa-envelope text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-dark/80">邮箱</h4>
                                    <p class="text-dark/70">mry1468749348@163.com</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="md:col-span-2">
                        <h3 class="text-xl font-bold text-dark mb-4">个人简介</h3>
                        <p class="text-dark/70 mb-4 leading-relaxed">
                            我是一名对Web开发充满热情的学习者，目前专注于前端开发技术的学习和实践。我喜欢通过实际项目来巩固所学知识，并不断探索新的技术和方法。
                        </p>
                        <p class="text-dark/70 mb-6 leading-relaxed">
                            虽然我目前还是一名学习者，但我具备良好的学习能力和团队协作精神，能够快速掌握新技术并应用到实践中。我相信通过持续学习和实践，我能够成长为一名优秀的前端开发者。
                        </p>
                        
                        <h3 class="text-xl font-bold text-dark mb-3">兴趣爱好</h3>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">编程</span>
                            <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm">学习新技术</span>
                            <span class="px-3 py-1 bg-accent/10 text-accent rounded-full text-sm">前端开发</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">代码阅读</span>
                            <span class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm">解决问题</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目经历 -->
    <section id="projects" class="py-16 md:py-24 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">学习练习项目</h2>
                <div class="w-20 h-1 bg-primary mx-auto"></div>
                <p class="text-dark/70 mt-4 max-w-2xl mx-auto">
                    以下是我在学习前端开发过程中完成的一些练习项目，每个项目都帮助我提升了不同的技能。
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 项目卡片1 -->
                <div class="bg-light rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/1/600/400" alt="个人简历网页" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-xl font-bold text-dark">个人简历网页</h3>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">HTML/CSS</span>
                        </div>
                        <p class="text-dark/70 mb-4">
                            响应式个人简历网页，展示个人信息、技能和学习经历，使用现代UI设计。
                        </p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="text-xs text-dark/60">HTML5</span>
                            <span class="text-xs text-dark/60">CSS3</span>
                            <span class="text-xs text-dark/60">响应式设计</span>
                        </div>
                        <a href="#" class="text-primary font-medium hover:underline flex items-center gap-1">
                            查看详情 <i class="fa fa-arrow-right text-xs"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 项目卡片2 -->
                <div class="bg-light rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/2/600/400" alt="待办事项应用" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-xl font-bold text-dark">待办事项应用</h3>
                            <span class="px-3 py-1 bg-secondary/10 text-secondary text-xs font-medium rounded-full">JavaScript</span>
                        </div>
                        <p class="text-dark/70 mb-4">
                            简单的待办事项管理应用，支持添加、删除、标记完成任务，使用本地存储保存数据。
                        </p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="text-xs text-dark/60">JavaScript</span>
                            <span class="text-xs text-dark/60">本地存储</span>
                            <span class="text-xs text-dark/60">DOM操作</span>
                        </div>
                        <a href="#" class="text-primary font-medium hover:underline flex items-center gap-1">
                            查看详情 <i class="fa fa-arrow-right text-xs"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 项目卡片3 -->
                <div class="bg-light rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/3/600/400" alt="简单计算器" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="text-xl font-bold text-dark">简单计算器</h3>
                            <span class="px-3 py-1 bg-accent/10 text-accent text-xs font-medium rounded-full">前端交互</span>
                        </div>
                        <p class="text-dark/70 mb-4">
                            具有基本算术功能的计算器，支持加减乘除等操作，实现了清晰的用户界面和交互逻辑。
                        </p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="text-xs text-dark/60">JavaScript</span>
                            <span class="text-xs text-dark/60">事件处理</span>
                            <span class="text-xs text-dark/60">CSS动画</span>
                        </div>
                        <a href="#" class="text-primary font-medium hover:underline flex items-center gap-1">
                            查看详情 <i class="fa fa-arrow-right text-xs"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技能清单 -->
    <section id="skills" class="py-16 md:py-24 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">技能清单</h2>
                <div class="w-20 h-1 bg-primary mx-auto"></div>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- 技术技能 -->
                    <div class="bg-accent/5 rounded-xl shadow-md p-6">
                        <h3 class="text-xl font-bold text-dark mb-6 flex items-center gap-2">
                            <i class="fa fa-code text-primary"></i>
                            技术技能
                        </h3>
                        
                        <div class="space-y-4">
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="font-medium text-dark/80">HTML/CSS</span>
                                <span class="text-sm text-dark/60">90%</span>
                                </div>
                                <div class="w-full bg-accent/20 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 90%"></div>
                                </div>
                            </div>
                            
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="font-medium text-dark/80">JavaScript</span>
                                    <span class="text-sm text-dark/60">85%</span>
                                </div>
                                <div class="w-full bg-accent/20 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 85%"></div>
                                </div>
                            </div>
                            
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="font-medium text-dark/80">React</span>
                                    <span class="text-sm text-dark/60">80%</span>
                                </div>
                                <div class="w-full bg-accent/20 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 80%"></div>
                                </div>
                            </div>
                            
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="font-medium text-dark/80">Git</span>
                                    <span class="text-sm text-dark/60">75%</span>
                                </div>
                                <div class="w-full bg-accent/20 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 软技能 -->
                    <div class="bg-secondary/5 rounded-xl shadow-md p-6">
                        <h3 class="text-xl font-bold text-dark mb-6 flex items-center gap-2">
                            <i class="fa fa-users text-accent"></i>
                            软技能
                        </h3>
                        
                        <div class="grid grid-cols-2 gap-4">
                            <div class="bg-light p-4 rounded-lg shadow-sm flex flex-col items-center text-center">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-3">
                                    <i class="fa fa-comments text-xl"></i>
                                </div>
                                <h4 class="font-semibold text-dark">沟通能力</h4>
                                <p class="text-xs text-dark/60 mt-1">良好的团队协作</p>
                            </div>
                            
                            <div class="bg-light p-4 rounded-lg shadow-sm flex flex-col items-center text-center">
                                <div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center text-secondary mb-3">
                                    <i class="fa fa-lightbulb-o text-xl"></i>
                                </div>
                                <h4 class="font-semibold text-dark">问题解决</h4>
                                <p class="text-xs text-dark/60 mt-1">快速分析问题</p>
                            </div>
                            
                            <div class="bg-light p-4 rounded-lg shadow-sm flex flex-col items-center text-center">
                                <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center text-accent mb-3">
                                    <i class="fa fa-book text-xl"></i>
                                </div>
                                <h4 class="font-semibold text-dark">学习能力</h4>
                                <p class="text-xs text-dark/60 mt-1">持续自我提升</p>
                            </div>
                            
                            <div class="bg-light p-4 rounded-lg shadow-sm flex flex-col items-center text-center">
                                <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center text-accent mb-3">
                                    <i class="fa fa-clock-o text-xl"></i>
                                </div>
                                <h4 class="font-semibold text-dark">时间管理</h4>
                                <p class="text-xs text-dark/60 mt-1">高效完成任务</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系方式 -->
    <section id="contact" class="py-16 md:py-24 bg-gradient-to-br from-primary/5 to-accent/5">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">联系我</h2>
                <div class="w-20 h-1 bg-primary mx-auto"></div>
                <p class="text-dark/70 mt-4 max-w-2xl mx-auto">
                    如果您对我的作品感兴趣，或者想了解更多信息，请随时与我联系。
                </p>
            </div>
            
            <div class="bg-white rounded-xl shadow-md p-6 md:p-8 max-w-4xl mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-bold text-gray-800 mb-6">联系方式</h3>
                        
                        <div class="space-y-4">
                            <div class="flex items-start gap-4">
                                <div class="bg-primary/10 p-3 rounded-lg text-primary">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-700">邮箱</h4>
                                    <a href="mailto:developer@example.com" class="text-primary hover:underline">mry1468749348@163.com</a>
    
                                </div>
                            </div>
                            
                            <div class="flex items-start gap-4">
                                <div class="bg-secondary/10 p-3 rounded-lg text-secondary">
                                    <i class="fa fa-phone"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-700">电话</h4>
                                    <p class="text-gray-600">13008710203</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start gap-4">
                                <div class="bg-accent/10 p-3 rounded-lg text-accent">
                                    <i class="fa fa-map-marker"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-700">地址</h4>
                                    <p class="text-gray-600">辽宁省沈阳市东北大学浑南校区</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-8">
                            <h4 class="font-medium text-gray-700 mb-3">社交媒体</h4>
                            <div class="flex space-x-4">
                                <a href="#" class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center text-primary hover:bg-primary/20 transition-colors">
                                    <i class="fa fa-facebook"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-secondary/10 rounded-full flex items-center justify-center text-secondary hover:bg-secondary/20 transition-colors">
                                    <i class="fa fa-twitter"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-accent/10 rounded-full flex items-center justify-center text-accent hover:bg-accent/20 transition-colors">
                                    <i class="fa fa-linkedin"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-dark/10 rounded-full flex items-center justify-center text-dark hover:bg-dark/20 transition-colors">
                                    <i class="fa fa-github"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-bold text-gray-800 mb-6">发送消息</h3>
                        
                        <form class="space-y-4">
                            <div>
                                <label for="name" class="block text-sm font-medium text-dark/80 mb-1">姓名</label>
                                <input type="text" id="name" class="w-full px-4 py-2 border border-accent rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors outline-none" placeholder="您的姓名">
                            </div>
                            
                            <div>
                                <label for="email" class="block text-sm font-medium text-dark/80 mb-1">邮箱</label>
                                <input type="email" id="email" class="w-full px-4 py-2 border border-accent rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors outline-none" placeholder="您的邮箱">
                            </div>
                            
                            <div>
                                <label for="message" class="block text-sm font-medium text-dark/80 mb-1">消息</label>
                                <textarea id="message" rows="4" class="w-full px-4 py-2 border border-accent rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors outline-none resize-none" placeholder="请输入您的消息..."></textarea>
                            </div>
                            
                            <button type="submit" class="w-full px-6 py-3 bg-primary text-white font-medium rounded-lg shadow-md hover:bg-primary/90 transition-all-300 flex items-center justify-center gap-2">
                                <i class="fa fa-paper-plane"></i>
                                发送消息
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="text-center">
                <div class="mb-4">
                    <a href="#hero" class="text-xl font-bold flex items-center justify-center space-x-2">
                        <i class="fa fa-user-circle"></i>
                        <span>我的主页</span>
                    </a>
                </div>
                <p class="text-light/70 mb-6">
                    &copy; 2025 个人主页. 保留所有权利.
                </p>
                <div class="flex justify-center space-x-4">
                    <a href="#about" class="text-light/70 hover:text-white transition-colors">关于我</a>
                    <a href="#projects" class="text-light/70 hover:text-white transition-colors">项目经历</a>
                    <a href="#skills" class="text-light/70 hover:text-white transition-colors">技能</a>
                    <a href="#contact" class="text-light/70 hover:text-white transition-colors">联系我</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('py-2', 'shadow-md');
                navbar.classList.remove('py-3', 'shadow-sm');
            } else {
                navbar.classList.add('py-3', 'shadow-sm');
                navbar.classList.remove('py-2', 'shadow-md');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80, // 考虑导航栏高度
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    document.getElementById('mobile-menu').classList.add('hidden');
                }
            });
        });
        
        // 表单提交处理
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            // 这里可以添加表单验证和提交逻辑
            alert('感谢您的留言！我会尽快回复您。');
            this.reset();
        });
    </script>
</body>
</html>